<template>
    <view class="diy-number-in dir-top-nowrap" :style="[boxStyle]">
        <view class="_diy-form-label"
              :style="{ color: data.title_color}"
              v-if="data.list_style != 3"
              :class="{required: data.is_required}">
            {{ data.title }}
        </view>
        <view :style="[inputStyle]" class="dir-left-nowrap cross-center">
            <view class="_diy-form-label left box-grow-0"
                  :style="{ color: data.title_color}"
                  v-if="data.list_style == 3"
                  :class="{required: data.is_required}">
                {{ data.title | calcTextWidth }}
            </view>
            <view class="p-input box-grow-1" :class="{right: data.list_style == 3}">
                <div class="dir-left-nowrap cross-center" :class="data.list_style == 3 ? 'main-right': 'main-between'"
                     style="width: 100%">
                    <app-input type="digit"
                               v-model="form.value"
                               :placeholder="`${data.number_type === 'int' ? data.number_min : data.number_float_min} - ${data.number_type === 'int' ? data.number_max : data.number_float_max}`"
                               :padding-left="0"
                               @blur="changeInput"
                               :color="data.in_color"
                               background-color="inherit"
                               :placeholder-style="`color:${data.place_color};font-size: 30rpx`"
                    ></app-input>
                    <div :style="{color: data.in_color}" class="box-grow-0" style="margin-left: 20rpx;font-size:30rpx">
                        {{ data.unit }}
                    </div>
                </div>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'diy-number-in',
    props: {
        index: [Number, String],
        value: Object,
        formId: [Number, String]
    },
    data() {
        return {
            form: {
                value: '',
            },
            data: {},
        }
    },
    watch: {
        'form.value': {
            handler(newValue) {
                this.$emit('updateValue', {
                    index: this.index,
                    value: newValue,
                });
            },
            deep: true
        }
    },
    created() {
        this.data = this.value;
        if(this.data.default_var) this.form.value = this.data.default_var;
    },
    methods: {
        changeInput() {
            let value = this.form.value;
            this.$nextTick(_ => {
                let {number_type, number_min, number_max, number_float_min, number_float_max} = this.data;
                if (value) {
                    let max = number_type === 'int' ? number_max : number_float_max,
                        min = number_type === 'int' ? number_min : number_float_min;
                    if (Number(value) > Number(max)) {
                        this.form.value = max
                        return
                    }
                    if (Number(value) < Number(min)) {
                        this.form.value = min
                        return
                    }

                    if (number_type === 'float') {
                        this.form.value = this.form.value.match(/^\d+(\.)?\d{0,2}/g).shift();
                    } else {
                        this.form.value = this.form.value.match(/[1-9]\d*|/).shift();
                    }
                }
            })
        },
    },
    filters: {
        calcTextWidth: function (text) {
            return text ? text.substring(0, 4) : '';
        }
    },
    computed: {
        btnStyle() {
            return (type) => {
                let {
                    nosend_btn_color,
                    send_btn_color,
                    nosend_text_color,
                    send_text_color
                } = this.data;
                let style = {
                    fontSize: '24rpx',
                    borderRadius: '6rpx',
                    marginLeft: '24rpx',
                };
                if (type === 'nosend') {
                    Object.assign(style, {
                        background: nosend_btn_color,
                        color: nosend_text_color,
                        padding: '12rpx 30rpx',
                    })
                }
                if (type === 'send') {
                    Object.assign(style, {
                        background: send_btn_color,
                        color: send_text_color,
                        padding: '12rpx 16rpx',
                    })
                }
                return style;
            };
        },
        boxStyle() {
            let {
                bg_color,
                input_padding,
            } = this.data;
            return {
                backgroundColor: bg_color,
                padding: `20rpx ${input_padding}rpx`,
            }
        },
        inputStyle() {
            let {
                border_color,
                input_radius,
                padding_color,
                list_style,
            } = this.data;
            let style = {
                padding: '0 24rpx',
            }
            if (list_style == 1) {
                Object.assign(style, {
                    borderBottomWidth: '1px',
                    borderBottomStyle: 'solid',
                    borderBottomColor: border_color,
                })
            } else {
                Object.assign(style, {
                    border: `1px solid ${border_color}`,
                    borderRadius: `${input_radius}rpx`,
                    background: padding_color,
                })
            }
            return style;
        },
    },
}
</script>

<style scoped lang="scss">
._diy-form-label {
    padding-left: #{20rpx};
    font-size: #{30rpx};
    white-space: nowrap;
    margin-bottom: #{18rpx};
}

._diy-form-label.required:after {
    content: '*';
    margin-left: 6#{rpx};
    color: #FF4544;
}

.diy-number-in {
    ._diy-form-label.left {
        padding: 0;
        margin: 0;
        width: 140#{rpx};
    }

    .p-input {
        height: 84#{rpx};
    }

    .p-input.right {
        text-align: right;
    }
}
</style>
